<template>
	<!-- 
		需求：自定义一个v-big指令，和v-text指令类似，但是可以把指定的数字放大10倍去呈现
	-->
	<div class="app">
		<h2>
			sum的值是:
			<span v-text="sum"></span>
		</h2>

		<h2>
			sum的值是:
			<span v-big="sum"></span>
		</h2>

		<h2>
			sum的值是:
			<span v-very-big="sum"></span>
		</h2>

		<h2 v-beautiful>我是一段很美丽的文字</h2>

		<button @click="sum++">点我sum+1</button>
	</div>
</template>

<script>
	export default {
		name:'App',
		data() {
			return {
				sum:0
			}
		},
		directives:{ //自定义一个局部指令
			//big函数何时调用？ —— 当有人使用v-big指令的时
			//big函数中的this是谁？ —— vc
			big(element,binding){
				console.log('big被调用了，应该是有人使用了v-big指令')
				element.innerText = binding.value * 10
				element.style.backgroundColor = 'pink'
			},
			'very-big'(element,{value}){
				console.log('big被调用了，应该是有人使用了v-big指令')
				element.innerText = value * 100
				element.style.backgroundColor = 'blue'
			}
		}
	}
</script>

<style scoped>
	.app{
		background-color: skyblue;
		padding: 10px;
	}
</style>